<template>
  <div id="log-in-page">
    <div class="na-bg-img">
      <div class='log-in-back' >
        <div @click="backClick">
          <van-icon name="arrow-left" size="30" color="white"/>
        </div>
      </div>
      <div class="username-input"  v-if="isShowUsernameInput">
        <span>请输入相关信息</span>
        <van-field v-model="username" label="用户名" placeholder="请输入用户名或邮箱"/>
        <div>
          <van-button type="info" v-show="NotClick" 
          @click="nextClick">下一步</van-button>
          <van-field v-model="password" type="password" label="密码" 
          v-show="isNextClick" 
          @input="isinput"/>
          <div class="forget-pw"><span  @click="forgetPWClick" v-show="isNextClick">忘记密码</span></div>
          <div class="user-log-in"><van-button :disabled="isDisabled" type="info" 
          :loading="isLoading"
          loading-text="正在登录"
          v-show="isNextClick" 
          @click="userLogInClick">登录</van-button></div>
        </div>
      </div>

      <div v-else class="registered" >
        <span>欢迎注册</span>
        <van-field v-model="email" label="邮箱" placeholder="请输入邮箱"  @input="isinput"/>
        <div class="zc-btn"><van-button type="info" :disabled="isDisabled" @click="signUpNowClick">立即注册</van-button></div>
      </div>
      
    </div>
    <div class="bottom-help" v-show="bottonHlepIsShow" >
      <div class="bottom-help-control">
      <div @click="zcClick"><span>注册</span></div>
      <div @click="helpClick"><span>帮助</span></div>
      </div>
    </div>


  </div>
</template>
<script>

import Vue from 'vue';
import axios from 'axios';

import networkPath from '../../network/networkPath'

import { Icon } from 'vant';
import { Button } from 'vant';
import { Field } from 'vant';
import { Toast } from 'vant';

Vue.use(Toast);
Vue.use(Field);
Vue.use(Button);
Vue.use(Icon);

export default {
  name: 'LogIn',
  data() {
    return {
      email: '',
      username: '',
      password: '',
      NotClick: true,
      isNextClick: false,
      isDisabled: true,
      isLoading: false,
      isShowUsernameInput:true,
      bottonHlepIsShow:true,
      userLOgINStatus: {}
    }
  },
  methods: {
    backClick(){
      this.$router.back()
      if(this.$store.state.isShow == false){
        this.$store.state.isShow = true
      }
      
    },
    nextClick(){
      this.NotClick = false
      this.isNextClick = true
    },
    isinput(){
      this.isDisabled = false
    },
    zcClick(){
      this.isShowUsernameInput = false
      console.log('zcclick')
      this.bottonHlepIsShow =false
    },
    helpClick(){
      this.$router.push({
      path: '/help'
      })
    },
    forgetPWClick(){
      this.$router.push({
      path: '/forgetpassword'
      })
    },
    //立即注册
    signUpNowClick(){
      axios.post(`${networkPath.baseURL}/api/user/regsend`,`email=${this.email}`).then(
        res => {
          console.log(res)
          if(res.data.code == 200){
            this.$router.push({
            path: '/profile'
          })
            Toast(res.data.message)
          }else{
            Toast(res.data.message)
          }
        }
      )
      
    },
    //登录
    userLogInClick(){
      this.isLoading =  true
      let emailreg = /^\w{3,}(\.\w+)*@[A-z0-9]+(\.[A-z]{2,5}){1,2}$/;
			let email = this.username;
			if(emailreg.test(email)){
        axios.post(`${networkPath.baseURL}/api/user/login`,`email=${this.username}&password=${this.password}`).then(res =>{
        this.isLoading = false
       
        if(res.data.code == 100){
          // 登录成功
          // 将登录信息保存至本地缓存中
          localStorage.setItem("userInfo",JSON.stringify(res.data.data))

          Toast({message:res.data.message,position: 'top'})
          setTimeout(() => {
            this.$router.replace({
            path: '/home'
          })
          }, 2000);
          if(this.$store.state.isShow == false){
          this.$store.state.isShow = true
          }
        }else{
          Toast({message:res.data.message,position: 'top'})
        }
      })
      }else{
        axios.post(`${networkPath.baseURL}/api/user/login`,`username=${this.username}&password=${this.password}`).then(res =>{
        this.isLoading = false
        if(res.data.code == 100){
          // 登录成功
          // 将登录信息保存至本地缓存中
          localStorage.setItem("userInfo",JSON.stringify(res.data.data))

          Toast({message:res.data.message,position: 'top'})
          setTimeout(() => {
            this.$router.replace({
            path: '/home'
          })
          }, 2000);
          if(this.$store.state.isShow == false){
          this.$store.state.isShow = true
          }
        }else{
          Toast({message:res.data.message,position: 'top'})
        }
      })
      }

      

    }
  },
}
</script>
<style>
.na-bg-img{
  height: 80vh;
  background-image: linear-gradient(to bottom, #3e59ec, #b4ddf5);
}

.log-in-back{
  width: 100%;
  height: 44px;
}
.log-in-back div{
  width: 44px;
  position: absolute;
  height: 44px;
  padding-top: 5px;
  padding-left: 0px;

}
.username-input{
  height: 70vh;
  width: 90vw;
  background-color: rgba(255, 255, 255, 0.63);
  text-align: center;
  margin-left: 5vw;
  line-height: 20vh;
}
.forget-pw{
  padding-right: 20px;
  font-size: 10px;
  height: 50px;
  text-align: right;
}
.user-log-in{
  padding-top: 0px;
}
.registered{
  height: 70vh;
  width: 90vw;
  background-color: rgba(255, 255, 255, 0.63);
  text-align: center;
  margin-left: 5vw;
  line-height: 20vh;
}


.bottom-help{
  width: 100%;
  padding-bottom: 0px;
}
.bottom-help-control{
  display: flex;
  width: 100%;
  height: 20vh;
}
.bottom-help-control div{
  text-align: right;
  font-size: 10px;
  padding-left: 30%;
  padding-top: 10%;
}
</style>